<template>
	<view class="page">
		<nav-bar title="预警处理" leftArrow />

		<van-sticky :offset-top="46">
			<van-tabs v-model:active="active" @click="onTab">
				<van-tab v-for="tab in tabList" :title="tab.title" :name="tab.value"></van-tab>
			</van-tabs>
		</van-sticky>

		<van-pull-refresh class="van-pull-refresh-page-with-nav-tab" v-model="refreshing" @refresh="onRefresh">
			<van-list v-model:loading="loading" :finished="finished" :finished-text="list.length ? '没有更多了' : ''"
				@load="onLoad" class="universal-list-list">
				<template v-if="list.length">
					<van-cell v-for="item in list" :key="item">
						<view class="universal-list-item" @click="goLink(item.status, item.alertId)">
							<view class="universal-list-head">
								<view class="universal-list-title">{{ item.projectItemName }}</view>
								<view class="universal-list-status">
									<tag-diff-day v-if="active === 0" :day="item.alertStartTimeStr"></tag-diff-day>
									<van-tag v-if="item.todoStatus === '1'" type="primary">已处理</van-tag>
									<van-tag v-else
										:type="item.status === '4' ? 'primary' : 'warning'">{{ item.statusStr }}</van-tag>
								</view>
							</view>

							<view class="universal-list-main">
								<view class="universal-list-detail w-full">
									<view class="universal-list-detail-title">预警对象：</view>
									<van-text-ellipsis class="universal-list-detail-cont"
										:content="item.projectItemName" />
								</view>
								<view class="universal-list-detail">
									<view class="universal-list-detail-title">处理人：</view>
									<van-text-ellipsis class="universal-list-detail-cont"
										:content="item.handlerName || '-'" />
								</view>
								<view class="universal-list-detail">
									<view class="universal-list-detail-title">预警类型：</view>
									<van-text-ellipsis class="universal-list-detail-cont"
										:content="item.alertTypeName" />
								</view>
								<view class="universal-list-detail w-full">
									<view class="universal-list-detail-title">预警开始时间：</view>
									<van-text-ellipsis class="universal-list-detail-cont"
										:content="item.alertStartTime" />
								</view>
								<view class="universal-list-detail w-full">
									<view class="universal-list-detail-title">预警结束时间：</view>
									<van-text-ellipsis class="universal-list-detail-cont"
										:content="item.autoEndTime || '-'" />
								</view>
								<view class="universal-list-detail w-full">
									<view class="universal-list-detail-title">预警内容：</view>
									<van-text-ellipsis class="universal-list-detail-cont" :content="item.content" />
								</view>
							</view>

							<view class="universal-list-footer">
								<view class="universal-list-footer-button">
									<!-- 处置 指派 处理 审核 详情 -->
									<template v-if="item.todoUsers && item.todoUsers.find(it => it == currentUserId)">
										<!-- 1待指派 -->
										<view v-if="item.status === '1'"
											class="universal-list-footer-button universal-list-footer-button-warning">
											处置
											<van-icon name="arrow" />
										</view>
										<!-- 2待处理 -->
										<view v-else-if="item.status === '2'"
											class="universal-list-footer-button universal-list-footer-button-warning">
											处理
											<van-icon name="arrow" />
										</view>
										<!-- 3待审核 -->
										<view v-else-if="item.status === '3'"
											class="universal-list-footer-button universal-list-footer-button-warning">
											审核
											<van-icon name="arrow" />
										</view>
									</template>
									<view v-else class="universal-list-footer-button">
										详情
										<van-icon name="arrow" />
									</view>
								</view>
							</view>
						</view>
					</van-cell>
				</template>
				<template v-else>
					<van-empty v-if="!loading" description="暂无数据" />
				</template>
			</van-list>
		</van-pull-refresh>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	import dayjs from 'dayjs'

	import {
		apiAlertPageH5
	} from '@/api/warningHandle';

	import store from '@/store'

	const userInfo = store.getters.GET_USER_INFO.sysUser;
	const currentUserId = ref(Number(userInfo.userId) || '');

	const active = ref(0);
	const tabList = [
		// {
		// 	title: '全部',
		// 	value: '',
		// },
		{
			title: '待处理',
			value: 0,
		},
		{
			title: '已处理',
			value: 1,
		},
	];
	const list = ref([]);
	const total = ref(0);
	const listCache = {};
	const loading = ref(false);
	const finished = ref(false);
	const refreshing = ref(false);
	const pages = ref({
		pageNum: 1,
		pageSize: 10,
	})

	const onLoad = () => {
		getList();
	};

	const onRefresh = () => {
		refreshing.value = false;
		loading.value = true;
		finished.value = false;

		list.value = [];
		pages.value.pageNum = 1;
		onLoad();
	};

	const onTab = () => {
		onRefresh();
	};

	const getPageList = () => {
		// if (listCache[active.value] && listCache[active.value].length) {
		// 	list.value = listCache[active.value];
		// 	return;
		// }
		// list.value = [];

		apiAlertPageH5({
			...pages.value,
			status: active.value
		}).then(res => {
			setList(res, active.value)
		}).finally(() => {
			resetLoadingStatus()
		})
	}

	const getList = () => {
		getPageList();
	};

	const setList = (res, key) => {
		// 获取今天的时间戳
		const today = new Date().getTime();

		// 如果是第一页,列表数据清空
		if (pages.value.pageNum === 1) {
			list.value = [];
		};

		// 列表赋值
		res.data.map(item => {
			let {
				alertStartTime
			} = item;
			alertStartTime = new Date(alertStartTime).getTime();
			list.value.push({
				...item,
				alertStartTimeStr: dayjs(today).diff(alertStartTime, 'day'),
			})
		});
		total.value = res.total;
		listCache[key] = list.value;
	};

	const resetLoadingStatus = () => {
		// 数据获取完毕，加载状态更新
		loading.value = false;

		// 数据获取完毕，下拉刷新状态更新
		refreshing.value = false;

		// 数据全部加载完成
		if (list.value.length >= total.value) {
			finished.value = true;
		} else {
			// 如果数据还有未加载部分
			finished.value = false;
		}

		if (!finished.value) {
			pages.value.pageNum++;
		}
	}

	const goLink = (option, id) => {
		switch (option) {
			case 'created':
				uni.navigateTo({
					url: '/pages/warningHandle/created'
				})
				break;
			default:
				uni.navigateTo({
					url: `/pages/warningHandle/detail?id=${id}&state=${option}`
				})
				break;
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/assets/universal-list.scss";
</style>